<template>
    <div class="chart main_content clear_fix">
      <div id="pie"></div>
      <div id="radar"></div>
    </div>
</template>
<script>
  import Echarts from 'echarts'
  export default{
    data () {
      return {
        msg: 'hello chart'
      }
    },
    mounted () {
      let pie = Echarts.init(document.getElementById('pie'));
      let radar = Echarts.init(document.getElementById('radar'));
      let pieOption = {
        title: {
          text: '饼状图-数据虚构',
          x:'right',
          y:'bottom'
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          data:['直达','营销广告','搜索引擎','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他']
        },
        series: [
          {
            name:'访问来源',
            type:'pie',
            selectedMode: 'single',
            radius: [0, '30%'],

            label: {
              normal: {
                position: 'inner'
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data:[
              {value:335, name:'直达', selected:true},
              {value:679, name:'营销广告'},
              {value:1548, name:'搜索引擎'}
            ]
          },
          {
            name:'访问来源',
            type:'pie',
            radius: ['40%', '55%'],
            data:[
              {value:335, name:'直达'},
              {value:310, name:'邮件营销'},
              {value:234, name:'联盟广告'},
              {value:135, name:'视频广告'},
              {value:1048, name:'百度'},
              {value:251, name:'谷歌'},
              {value:147, name:'必应'},
              {value:102, name:'其他'}
            ]
          }
        ]
      };
      let radarOption = {
        title: {
          text: '雷达图-浏览器占比变化',
          x:'right',
          y:'bottom'
        },
        tooltip: {
          trigger: 'item',
          backgroundColor : 'rgba(0,0,250,0.2)'
        },
        legend: {
          data: (function (){
            var list = [];
            for (var i = 1; i <=28; i++) {
              list.push(i + 2000 + '');
            }
            return list;
          })()
        },
        visualMap: {
          color: ['red', 'yellow']
        },
        radar: {
          indicator : [
            { text: 'IE8-', max: 400},
            { text: 'IE9+', max: 400},
            { text: 'Safari', max: 400},
            { text: 'Firefox', max: 400},
            { text: 'Chrome', max: 400}
          ]
        },
        series : (function (){
          var series = [];
          for (var i = 1; i <= 28; i++) {
            series.push({
              name:'浏览器（数据纯属虚构）',
              type: 'radar',
              symbol: 'none',
              itemStyle: {
                normal: {
                  lineStyle: {
                    width:1
                  }
                },
                emphasis : {
                  areaStyle: {color:'rgba(0,250,0,0.3)'}
                }
              },
              data:[
                {
                  value:[
                    (40 - i) * 10,
                    (38 - i) * 4 + 60,
                    i * 5 + 10,
                    i * 9,
                    i * i /2
                  ],
                  name: i + 2000 + ''
                }
              ]
            });
          }
          return series;
        })()
      };
      pie.setOption(pieOption);
      radar.setOption(radarOption);
    }
  }
</script>
<style>
  @import "../assets/style/chart.scss";
</style>
